<template>
    <div>
        <headNav title="发布广播"></headNav>
         <div class="noticeType">
             <span style="float: left;" class="boXiang">通知类型：</span>
             <div style="float: left;margin-top:0.06rem">
                <checklist :options="typeList" v-model="noticeType" :max="1" @on-change="changeType" @checklist-icon-active-color="'#000000'"></checklist>
            </div>
        </div>
        <group  label-width="5.5em" gutter="0rem" label-margin-right="0em" label-align="left">
            <div class="rowStyle">
                <x-input type="text" :min=1 :max=10 :show-clear='false' title="通知标题：" v-model.trim="title" text-align="left"  placeholder="请输入广播标题，10个字以内"></x-input>
            </div>
        </group>
        <div class="transcribe">
            <div class="radioList">
                <checklist :options="commonList" v-model="radioValue" :max="1" @on-change="change" @checklist-icon-active-color="'#000000'"></checklist>
            </div>
            <div v-if="radioValue == '0'" class="textVoice">
                <textarea placeholder="请输入通知内容，120字以内" v-model.trim="msgText"></textarea>
            </div>
            <div v-if="radioValue == '1'">
                <p class="transcribeP"><span>录制语音</span><label>[请录制6秒以上的语音]</label></p>
                <media ref="media" :showVoice='false' :showImg='false' :showVideo='false' :showLink='false'></media>
                <img class="tranImg"  src="@/assets/img/homeWork/transcribe.png" @click="startRecord" alt="">
            </div>
        </div>
        <div class="selObj">
             <span class="boXiang">播报对象：</span>
             <div class="selXiang" @click="selClass">
                 <span v-if="classNames.length == 0 && (isSchool == 2 || !isSchool)" class="nameStyle">选择播报对象</span>
                 <span v-if="classNames.length == 0 && isSchool == 1" class="nameStyle">全校</span>
                 <span v-if="classNames.length > 0 && isSchool == 2" class="nameStyle">{{classNames.join(',')}}</span>
                 <img src="@/assets/img/homeWork/you.png" alt="">
             </div>
        </div>
        <div class="stuName" v-show="studentData.length > 0">
            <ul>
                <li v-for="(item,index) in studentData" :key="index">{{item.studentName}}</li>
            </ul>
        </div>

        <div class="warning-div">
            <img class="warning-img" src="@/assets/img/warning.png" alt="">
            <p class="warning-p">1、广播发布后，会将广播文字转换为语音消息，同步发送给学生的电子学生证。</p>
            <p class="warning-p">2、电子学生证接收语音广播的时间段为：7:00-22:00。紧急广播全天24小时实时发送。</p>
            <p class="warning-p">3、语音广播当日有效，次日不再发送给电子学生证。</p>
        </div>

        
        <div class="bottom-p">
           <div class="publishBtn" @click="publishVoice">立即发布</div>
        </div>
        <div class="bottom-space"></div>


        <selClass @hide='hideReadDetail' @remarkData='remarkData' @activeArr='activeArr' v-show="isReadDetail"></selClass>
     
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import {Checklist, Group, XInput, XTextarea, Selector, PopupPicker, Datetime  } from 'vux'
import media from '@/components/media'
import selClass from './selClass'
export default {
    components:{
        Checklist, Group, XInput, XTextarea, Selector, PopupPicker, Datetime, headNav, selClass, media
    },
    data() {
        return {
            isReadDetail: false,
            title:'',
            classIds:[],
            classNames:[],
            studentIds:[],
            isPublishing: false,
            noticeType:['0'],
            typeList:[{key: '0', value: '一键广播'}, {key: '1', value: '紧急通知'}],
            radioValue: ['0'],
            commonList:[{key: '0', value: '文本输入'}, {key: '1', value: '语音输入'}],
            msgText:'',
            textAmr:'',
            studentData:[]
        }
    },
    computed:{
        serverIds () {
            return this.$store.state.media.voiceServerIds
        },
        isSchool () {
            return this.$store.state.broadcast.isSchool
        },
        voicesSource () {
            return this.$store.state.media.voicesSource
        }
    },
    methods:{
        change (val, label) {
            this.radioValue = val
            this.msgText = ''
        },
        changeType (val, label) {
            this.noticeType = val
        },
        selClass(){
           this.isReadDetail = true
        },
         hideReadDetail(){
            this.isReadDetail = false
        },
        remarkData(data){
            this.classIds = []
            this.classNames = []
            for(var item of data){
               this.classIds.push(item.id)
               this.classNames.push(item.gradeName + item.name)
            }
        },
        activeArr(data){
            this.studentData = data
            this.studentIds = []
            for(var item of data){
               this.studentIds.push(item.studentId)
            }
        },
        publishVoice () {
            if(this.noticeType.length == 0){
                this.$vux.toast.text('请选择通知类型', 'top')
                return
            }
            if(this.radioValue.length == 0){
                this.$vux.toast.text('请选择输入类型', 'top')
                return
            }
            if(!this.title){
                this.$vux.toast.text('请输入标题', 'top')
                return
            }
            if(this.isSchool == 0){
                this.$vux.toast.text('请选择播报的班级', 'top')
                return
            }
            if(this.isSchool == 2 && this.classIds.length == 0 && this.studentIds.length == 0){
                this.$vux.toast.text('请选择播报的班级或播报学生', 'top')
                return
            }
            if(this.radioValue[0] == '0'){
                if(!this.msgText){
                    this.$vux.toast.text('请输入文字', 'top')
                    return
                }
                if(this.msgText.length > 119){
                    this.$vux.toast.text('只能输入120字以内的通知内容', 'top')
                    return
                }
                this.getAmr()
            }else{
                if(this.voicesSource.length == 0){
                    this.$vux.toast.text('请录入语音', 'top')
                    return
                }
                this.startPublish()
            }
        },
        // 语音转文字
        getAmr () {
            var prams = {
                msgText:this.msgText
            }
            this.$store.dispatch('broadcast/ChangeTextToVoice', prams).then(res => {
                 this.textAmr = res.amrFileUrl
                 this.textPublish()
            })
        },
        // 录音
        startRecord(){
            if(this.voicesSource.length != 1){
                this.$refs.media.startRecord()
            }else{
                this.$vux.toast.text('只能录一条语音', 'top')
            }
        },
        // 发布语音广播
        async startPublish(){
            if (this.isPublishing) {
                return
            }
            //提交之前，先上传录音
            try {
                await this.$store.dispatch('media/upload')
            } catch (error) {
                this.isPublishing = false

                return
            }
            var prams = {
                title:this.title,
                loginUserId:this.$store.getters['user/loginUserId'],
                schoolId:this.$store.getters['user/schoolId'],   
                originalUrl: this.$store.state.media.voices.join(),
                totalSeconds: this.$store.state.media.timeList.join(),
                targetType:this.isSchool,
                targetUrl:this.$store.state.media.amrList.join(),
                classIds:this.classIds,
                studentIds:this.studentIds,
                broadCastType:this.noticeType[0]
            }
            this.$store.dispatch('broadcast/SchoolVoiceBroadcast',prams).then((data) => {
                 this.isPublishing = false
                    this.$vux.toast.text('发布成功', 'top')
                    this.$store.commit('broadcast/clear')
                    this.$router.push('adminList')
            })
        },
        // 发布文字广播
        textPublish(){
            if(!this.title){
                this.$vux.toast.text('请输入标题', 'top')
                return
            }
            if(this.isSchool == 0){
                this.$vux.toast.text('请选择播报的班级', 'top')
                return
            }
            if(this.isSchool == 2 && this.classIds.length == 0 && this.studentIds.length == 0){
                this.$vux.toast.text('请选择播报的班级或播报学生', 'top')
                return
            }
 
            var prams = {
                title:this.title,
                loginUserId:this.$store.getters['user/loginUserId'],
                schoolId:this.$store.getters['user/schoolId'],   
                originalUrl: '',
                totalSeconds: '0',
                targetType:this.isSchool,
                targetUrl:this.textAmr,
                classIds:this.classIds,
                 studentIds:this.studentIds,
                broadCastMsg:this.msgText,
                broadCastType:parseInt(this.noticeType[0]) 
            }
            this.$store.dispatch('broadcast/SchoolVoiceBroadcast',prams).then((data) => {
                 this.isPublishing = false
                    this.$vux.toast.text('发布成功', 'top')
                    this.$store.commit('broadcast/clear')
                    this.$router.push('adminList')
            })
        }
    }
}
</script>
<style  scoped>
.rowStyle{
        position: relative;
        padding: 0.1rem 0;
        border-bottom: 0.01rem solid #e5e5e5;
        font-size: 0.26rem;
      
    }
.transcribe{
    margin-top: 0.24rem;
    background-color: #ffffff;
    padding: 0 0.24rem;
    overflow: hidden;
    padding-bottom: 0.6rem;
    position: relative;
}
.transcribeP{
    line-height: 1rem;
}
.transcribeP span{
   font-size: 0.26rem;
    color: #010101;
}
.transcribeP label{
   font-size: 0.20rem;
    color: #CCCCCC;
    margin-left: 0.4rem;
}
.tranImg{
    width: 1.9rem;
    height: 0.74rem;
    position: absolute;
    right: 0.24rem;
    top: 1rem;
}
.selObj{
    height:0.88rem;
    background:rgba(255,255,255,1);
    margin-top: 0.24rem;
    padding: 0 0.24rem;
    line-height: 0.88rem;
}
.boXiang{
   color: #010101;
    font-size: 0.26rem;
}
.selXiang{
  float: right;
  font-size: 0.26rem;
  color: #CCCCCC;
}
.nameStyle{
    width: 4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    text-align: right;
    margin-right: 0.16rem;
}
.selXiang img{
    width: 0.1rem;
    height: 0.16rem;
    float: right;
    margin-top: 0.36rem;
}
.publishBtn{
    width:6.40rem;
    height:0.80rem;
    background:#128FEF;
    border-radius:0.10rem;
    color: #ffffff;
    font-size: 0.32rem;
    line-height: 0.8rem;
    text-align: center;
    margin: 0.28rem auto;
}
.mediaHide{
    display: none;
}
/* ===============改 */
.noticeType{
    height:0.88rem;
    background:rgba(255,255,255,1);
    padding: 0 0.24rem;
    line-height: 0.88rem;
    margin-bottom: 0.24rem;
}
.radioList{
   
}
.textVoice{
    margin-top: 0.24rem;
}
.textVoice textarea{
    font-size: 0.24rem;
    width: 100%;
    height: 1rem;
    border: none;
    font-family: -webkit-body;
    line-height: 0.3rem;
}
.stuName{
     overflow: hidden;
    padding-top: 0.24rem;
    padding-bottom: 0.24rem;
    width: 100%;
}
.stuName li{
    float: left;
    padding: 0.1rem;
    border: 1px solid #ddd;
    margin-left: 0.24rem;
    border-radius: 0.1rem;
    margin-bottom: 0.24rem;
    height: 0.3rem;
    background-color: #fff;
}
.bottom-p{
    width: 100%; background: #fff;
    position: fixed; left: 0; bottom: 0; padding: 1px; box-shadow: 0 0 0.1rem 0.05rem rgba(0,0,0,0.3);
}
</style>
<style >
.transcribe .upload{
    height: 0 !important;
}
.weui-cells:after{
    border-bottom: none !important;
}
.weui-check_label{
    float: left !important;
}

.weui-cells{
   font-size: 0.26rem !important;
}
.weui-cells:before{
    border-top: none !important;
}
.vux-checklist-icon-checked{
    color:#C9C9C9 !important;
}
.vux-checklist-icon-checked:before{
    color:#2b85e4 !important;
}


.warning-div{
    background: #fff; padding:  0.24rem 0.24rem 0.24rem 0.5rem; margin: 0.32rem 0 0 0;
    position: relative;
}
.warning-img{
    width: 0.28rem; height: 0.28rem; position: absolute; 
    top: 0.24rem;
    left: 0.1rem;
}
.warning-p{
    padding:0 0 0.2rem 0;
}
.bottom-space{
    height: 2rem;
}

</style>

